<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display:none;
        }
    </style>
</head>
<div>
    <div> 
        <div onclick="change(this);"> 菜单一 </div>
        <div class="content">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
   </div>

    <div>
        <div onclick="change(this);"> 菜单二 </div>
        <div class="content hide">
            <div>11</div>
            <div>22</div>
            <div>33</div>
        </div>
    </div>

    <div>
        <div onclick="change(this);"> 菜单三 </div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
</div>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">

    function change(arg){
        //$(arg)表示当前点击的标签
//        var t = $(arg).text()
//        console.log(t);
    //一、找到下一个标签，移除hide
        //.next表示找到当前标签的下一个标签(兄弟标签) addClass('')表示添加一个Class,removeClass('')表示删除一个Class
        $(arg).next().removeClass('hide');
    //二、找到其他菜单，内容隐藏，添加hide
        //$(arg).parent()表示当前标签的父亲标签
        //$(arg).parent().siblings()所有父亲标签的兄弟标签 .find表示找,这里找所有的class=content的标签 addClass添加hide
        $(arg).parent().siblings().find('.content').addClass('hide');
    }
</script>
</body>
</html>